<template>
  <el-dialog
    :visible.sync="dialogVisible"
    top="10vh"
    append-to-body
    :close-on-click-modal="false"
    class="tag-edit-dialog monitor-flow-tree-dialog"
    width="80%"
    @closed="clearDialog"
    v-dialogMove
  >
    <div slot="title">
      <tag-content-header>
        <template #title>
          <span class="title-text">工作流记录</span>
        </template>
      </tag-content-header>
    </div>
    <tag-content-header refresh setting spread fold @toolFun="toolFun" :settingData="columns"></tag-content-header>
    <tag-tree-table ref="treeTable" :data="dataList" :loading="loading" :columns="columns" level="level">
      <!-- <template #timeLine="{ scope }">
        <span></span>
      </template> -->
      <template #elapsed="{ scope }">
        <span>{{ getElapsed(scope.row) }}</span>
      </template>
      <template #status="{ scope }">
        <span :class="{ 'failed-item': scope.row.status === 'FAILED' }">{{ scope.row.status }}</span>
      </template>
      <template #operation="{ scope }">
        <div class="operation-button-box">
          <el-tooltip
            effect="dark"
            content="查看日志"
            placement="top"
            :enterable="false"
            v-if="scope.row.type === 'command'"
          >
            <icon-svg name="iconLog" @click.native="handleLog(scope.row)"></icon-svg>
          </el-tooltip>
        </div>
      </template>
    </tag-tree-table>
    <span slot="footer" class="dialog-footer"></span>
    <log-dialog ref="logDialog"></log-dialog>
  </el-dialog>
</template>

<script>
import logDialog from './log-dialog'
import utils from '@/plugins/utils'
export default {
  components: {
    logDialog
  },
  data() {
    return {
      dialogVisible: false,
      execId: '',
      dataList: [],
      loading: false,
      columns: [
        {
          show: true,
          label: '名称',
          prop: 'id',
          expand: true
        },
        {
          show: true,
          label: '类型',
          prop: 'type',
          align: 'center'
        },
        // {
        //   show: true,
        //   label: '时间线',
        //   prop: 'timeLine'
        // },
        {
          show: true,
          label: '开始时间',
          prop: 'startDateTime',
          align: 'center',
          width: 160
        },
        {
          show: true,
          label: '结束时间',
          prop: 'endDateTime',
          align: 'center',
          width: 160
        },
        {
          show: true,
          label: '耗时',
          prop: 'elapsed',
          align: 'center'
        },
        {
          show: true,
          label: '执行状态',
          prop: 'status',
          align: 'center'
        },
        {
          show: 'fixed',
          label: '操作',
          prop: 'operation',
          align: 'center',
          width: 100
        }
      ]
    }
  },
  methods: {
    showDialog(execId) {
      this.execId = execId
      this.getList()
      this.dialogVisible = true
    },
    getList() {
      this.loading = true
      this.$ajax({
        url: this.$ajax.setUrl('azkaban/azkabanExecutionHistory/executionFlowTree'),
        method: 'get',
        params: this.$ajax.setParams({
          execId: this.execId
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dataList = utils.treeToArray(
            utils.arrayToTree(data.data, {
              id: 'nestedId',
              pid: 'parentNestedId',
              mainSort: 'level'
            })
          )
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    toolFun(operation) {
      switch (operation) {
        case 'refresh':
          // 刷新动作
          this.getList()
          break
        case 'spread':
          // 展开动作
          this.$refs['treeTable'].spreadAll()
          break
        case 'fold':
          // 折叠动作
          this.$refs['treeTable'].foldAll()
          break
      }
    },
    getElapsed(row) {
      if (row.endTime && row.startTime) {
        let time = row.endTime - row.startTime
        let day = Math.floor(time / (1000 * 60 * 60 * 24))
        let hour = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
        let minute = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60))
        let second = Math.floor((time % (1000 * 60)) / 1000)
        let str = ''
        if (day > 0) {
          str = str + day + '天'
        }
        if (hour > 0) {
          str = str + hour + '小时'
        }
        if (minute > 0) {
          str = str + minute + '分钟'
        }
        str = str + second + '秒'
        return str
      } else {
        return ''
      }
    },
    handleLog(row) {
      this.$refs.logDialog.showDialog(this.execId, 'schedule', row.nestedId)
    },
    clearDialog() {
      this.execId = ''
      this.dataList = []
      this.loading = false
    }
  }
}
</script>

<style lang="scss">
.monitor-flow-tree-dialog {
  .el-dialog__body {
    .tag-content-header {
      padding: 0 20px;
    }
    .failed-item {
      color: $tag-red;
    }
  }
}
</style>
